import QtQuick 2.0
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1
import "."
import "../javascript/Utils.js" as UtilsJS

ListView {
    id: produtosPanel
    property string titulo: "Produtos"
    property var subTitulo: null

    property string fornecedorId
    property var todosOsProdutos

    property alias items: listModel
    property string ultimoFiltro: ""

    width: parent.width
    spacing: UtilsJS.dp2px(2)
    //        visible: false;
    focus: false // necessário para que o teclado virtual não apareça
    property bool showMenuButton: false

    property Rectangle toolBarMenu: Rectangle {
        width: UtilsJS.dp2px(280)
        height: menuItems.height
        color: "#f3f3f3"

        Column {
            id: menuItems
            width: parent.width

            Button {
                text: "Info"
                style: applicationWindow.botoesDrawer
                width: parent.width
                height: UtilsJS.dp2px(48)
                property string icon: ""
                onClicked: {
                    applicationWindow.hideToolBarMenu();
                    applicationWindow.showPath();
                }
            }

            Button {
                text: "Finalizar Coleta"
                style: applicationWindow.botoesDrawer
                width: parent.width
                height: UtilsJS.dp2px(48)
                property string icon: ""
                onClicked: {
                    applicationWindow.hideToolBarMenu();
                    coletasController.finalizarColeta(fornecedorId);
                    applicationWindow.goBack();
                }
            }
        }
    }

    property var toolBarItem: TextField {
        id: filtroText
        width: UtilsJS.dp2px(200)
        height: UtilsJS.dp2px(40)
        Component.onCompleted: {
            if(parent) {
                anchors.verticalCenter = parent.verticalCenter;
            }
        }
    }


    Timer {
        interval: 1000
        running: true
        repeat: true
        onTriggered: { if(ultimoFiltro!=filtroText.text) produtosPanel.updateList(filtroText.text); }
    }

    model: ListModel {
        id: listModel
        ListElement {_id: "0"; descricao: "Aveia"; status: "NAO_COLETADO"}
        ListElement {_id: "0"; descricao: "Banana"; status: "NAO_COLETADO"}
        ListElement {_id: "0"; descricao: "Feijão Preto"; status: "NAO_COLETADO"}
        ListElement {_id: "0"; descricao: "Margarina"; status: "NAO_COLETADO"}
        ListElement {_id: "0"; descricao: "Ovos (cx. 36)"; status: "NAO_COLETADO"}
        ListElement {_id: "0"; descricao: "Carne de Sol"; status: "INDISPONIVEL"}
        ListElement {_id: "0"; descricao: "Coentro"; status: "INDISPONIVEL"}
        ListElement {_id: "0"; descricao: "Café"; status: "COLETADO"}
        ListElement {_id: "0"; descricao: "Cebola"; status: "COLETADO"}
    }

    section.property: "status"
    section.criteria: ViewSection.FullString
    section.delegate: Rectangle {
        anchors.left: parent.left
        anchors.right: parent.right
        height: UtilsJS.dp2px(48)

        Text {
            color: "#555558"
            font.pixelSize: UtilsJS.dp2px(18)
            anchors.left: parent.left
            anchors.leftMargin: UtilsJS.dp2px(12)
            anchors.right: parent.right
            anchors.rightMargin: UtilsJS.dp2px(12)
            anchors.verticalCenter: parent.verticalCenter
            font.bold: true
            text: {
                if (section == "NAO_COLETADO") {
                    return "Coletar";
                } else if (section == "INDISPONIVEL") {
                    return "Indisponível";
                } else {
                    return "Preço Coletado";
                }
            }
        }
        Rectangle {
            width: parent.width
            height: UtilsJS.dp2px(2)
            anchors.bottom: parent.bottom
            color: "#eeeeee"
        }
    }

    delegate: Button {
        width: parent.width
        height: UtilsJS.dp2px(48)

        // foi necessário colocar os valores vindos dos ListElements aqui
        // para poderem ser corretamente utilizados no ButtonStyle
        text: descricao
        property string situacao: status

        onClicked: {
            applicationWindow.fazerColeta(fornecedorId,subTitulo,_id);
        }

        style: ButtonStyle {
            padding.top: UtilsJS.dp2px(8)
            padding.right:  UtilsJS.dp2px(8)
            padding.bottom:  UtilsJS.dp2px(8)
            padding.left:  UtilsJS.dp2px(36)
            label: Item {
                Text {
                    renderType: Text.NativeRendering
                    anchors.verticalCenter: parent.verticalCenter
                    text: control.text
                    color: control.situacao == "NAO_COLETADO" ? "#555558" : "#a7a8ab"
                    font.pixelSize: UtilsJS.dp2px(18)
                }
            }
            background: Rectangle {
                border.width: UtilsJS.dp2px(2)
                border.color: control.pressed ? "#33b5e5" : "#ffffff"
                color: control.pressed ? "#ade1f4" : "#ffffff"
            }
        }
    }


    function updateList(startsWith) {
        ultimoFiltro = startsWith

        items.clear();

        var i;
        for(i=0; i<todosOsProdutos.length; i++) {
            if( (startsWith=="") || (todosOsProdutos[i]["Descricao"].indexOf(startsWith)==0) ) {
                items.append({"_id": todosOsProdutos[i]["id"]+"", "descricao": todosOsProdutos[i]["Descricao"],
                              "status": todosOsProdutos[i]["status"]});
            }
        }
    }

    function doUpdate() {
        applicationWindow.detalhePath(subTitulo);

        todosOsProdutos = produtosController.loadDadosProdutos(fornecedorId);
        updateList(ultimoFiltro);
    }

    function back() {
        return true;
    }
}
